<template>
  <div class="detail-container">
    <template v-if="$route.fullPath === $route.matched[2].path">
      <h3 class="detail-sub-title flex justify-between">
        <span>基础信息</span>
        <div>
          <el-button size="small" type="primary" @click="showModal">放映管理</el-button>
          <el-button size="small" type="primary" @click="linkToEdit">编辑</el-button>
        </div>
      </h3>
      <el-divider></el-divider>
      <div class="section-content">
        <div class="flex justify-between align-start base-info">
          <div class="flex-sub flex">
            <div class="poster-wrap">
              <el-image :src="detail.poster" fit="fill">
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </div>

            <div>
              <p>
                <strong class="movie-name mr-20">{{detail.name}}</strong>
                <span
                  class="movie-format mr-10"
                  v-for="(format, index) in detail.formats"
                  :key="index"
                >{{format}}</span>
                <el-tag class="movie-status">{{MOVIE_STATUS[detail.status]}}</el-tag>
              </p>
              <p class="info-item">{{detail.englishName || '无'}}</p>
              <p class="info-item movie-type">电影类型：{{detail.types || '无'}}</p>
              <p class="info-item">电影地区：{{detail.area || '无'}}</p>
              <p class="info-item">片长：{{detail.length || 0}}分钟</p>
              <p class="info-item">上映时间：{{detail.releaseTime | date('无')}}</p>
              <p class="info-item">下映时间：{{detail.outTime | date('无')}}</p>
              <p class="info-item">预售时间：{{detail.preSaleTime | date('无')}}</p>
            </div>

            <div></div>
          </div>
          <div class="flex justify-between align-start">
            <div class="statistics-info">
              <p class="statistics-title">总观影人次</p>
              <strong>{{viewTimes}}</strong>
            </div>
            <el-divider class="divider self-center" direction="vertical"></el-divider>
            <div class="statistics-info">
              <p class="statistics-title">实收票房</p>
              <strong>{{movieIncome}}</strong>
            </div>
          </div>
        </div>
      </div>

      <h3 class="detail-sub-title">票价管理</h3>
      <el-divider></el-divider>
      <div class="section-content">
        <el-table class="mt-20 el-table-modify" :data="moviePayList" border>
          <el-table-column prop="brandName" align="center" label="品牌"></el-table-column>
          <el-table-column prop="totalPlayAmount" align="center" label="总放映场次"></el-table-column>
          <el-table-column prop="todayPlayAmount" align="center" label="今日放映场次"></el-table-column>
          <el-table-column prop="todayViewAmount" align="center" label="购票观影人数"></el-table-column>
          <el-table-column prop="todayPrivilegeViewAmount" align="center" label="权益观影人数"></el-table-column>
          <el-table-column label="票价管理" align="center" fixed="right" width="120">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="linkToPriceEdit(scope.row)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <h3 class="detail-sub-title">剧情简介</h3>
      <el-divider></el-divider>
      <p class="section-content">{{detail.shortPlot || '无'}}</p>
      <h3 class="detail-sub-title">演职人员</h3>
      <el-divider></el-divider>
      <div class="section-content">
        <p class="info-item">导演：{{detail.directors || '(空)'}}</p>
        <p class="info-item">演员：{{detail.actors || '(空)'}}</p>
        <p class="info-item">编剧：{{detail.scenarists || '(空)'}}</p>
        <p class="info-item">监制：{{detail.producers || '(空)'}}</p>
        <p
          class="info-item"
          v-for="(item, index) in detail.otherStaffs"
          :key="index"
        >{{item.type}}：{{item.value}}</p>
      </div>
      <div class="detail-toolbar">
        <el-button size="small" @click="cancel">返回</el-button>
      </div>
    </template>

    <router-view v-if="$route.fullPath !== $route.matched[2].path"></router-view>

    <el-dialog title="放映管理" :visible.sync="dialogVisible" width="400px">
      <el-form class="el-form-modify" ref="payTimeform" label-width="120px" :model="playTime">
        <el-form-item label="预售时间">
          <el-date-picker
            v-model="playTime.preSaleTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="上映时间">
          <el-date-picker
            v-model="playTime.releaseTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="下映时间">
          <el-date-picker
            v-model="playTime.outTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
          ></el-date-picker>
        </el-form-item>
      </el-form>

      <div slot="footer" class="text-center">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="savePlayTime">保 存</el-button>
        <el-button v-if="detail.status == 'PLAYING'" type="primary" @click="pauseResume">上映</el-button>
        <el-button v-if="detail.status == 'PAUSED'" type="primary" @click="pauseResume">暂停上映</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  movieDetial,
  movieViewTimes,
  movieIncome,
  moviePayInfo,
  movieEditTime,
  movieShowPause,
  movieShowResume
} from "@/api/viewing";
import noImg from "@/assets/images/noimg.png";

import { MOVIE_STATUS } from "@/utils/const";

export default {
  data() {
    this.MOVIE_STATUS = MOVIE_STATUS;

    return {
      noImg,
      movieId: 0,
      detail: {},
      viewTimes: 0,
      movieIncome: 0,
      moviePayList: [],
      dialogVisible: false,
      playTime: {
        preSaleTime: "",
        releaseTime: "",
        outTime: ""
      }
    };
  },
  methods: {
    async requestDetail() {
      try {
        const { data } = await movieDetial(this.movieId);
        let { formats, otherStaffs } = data;
        data.formats = formats.split(";");
        otherStaffs = JSON.parse(otherStaffs || '{}');
        data.otherStaffs = Object.keys(otherStaffs).map(key => {
          return { type: key, value: otherStaffs[key].join("；") };
        });
        this.detail = data || {};
      } catch (error) {
        console.log(error)
      }
    },
    /**
     * 观影人次
     */
    async reuqestViewTimes() {
      try {
        const { data } = await movieViewTimes(this.movieId);
        this.viewTimes = data;
      } catch (error) {}
    },
    /**
     * 实收票房
     */
    async reuqestIncome() {
      try {
        const { data } = await movieIncome(this.movieId);
        this.movieIncome = data || 0;
      } catch (error) {}
    },
    /**
     * 放映信息
     */
    async reuqestPayInfo() {
      try {
        const { data } = await moviePayInfo(this.movieId);
        this.moviePayList = data || 0;
      } catch (error) {}
    },
    /**
     * 请求保存上映映时间
     */
    async savePlayTime() {
      try {
        const { releaseTime, preSaleTime, outTime } = this.playTime;
        await movieEditTime(this.movieId, this.playTime);
        this.$message.success("保存成功");
        this.requestDetail();
        this.dialogVisible = false;
      } catch (error) {}
    },
    /**
     * 暂停重新上映
     *
     */
    async pauseResume() {
      let method = movieShowResume,
        text = "上映";
      if (this.detail.status != "PAUSED") {
        method = movieShowPause;
        text = "暂停上映";
      }
      try {
        await method(this.movieId);
        this.$message.success(`${text}成功`);
        this.requestDetail();
      } catch (error) {}
    },
    showModal() {
      const { releaseTime, preSaleTime, outTime } = this.detail;
      Object.assign(this.playTime, { releaseTime, preSaleTime, outTime });
      this.dialogVisible = true;
    },
    linkToEdit() {
      this.$router.push({
        name: "movieEdit",
        params: { movieId: this.movieId }
      });
    },
    linkToPriceEdit(item) {
       this.$router.push({
        name: "moviePriceEdit",
        params: { movieId: this.movieId, brandId: item.brandId }
      });
    },
    cancel() {
      this.$router.go( this.$route.fullPath === this.$route.matched[2].path ? -1 : -2);
    }
  },
  created() {
    let { movieId } = this.$route.params;
    if (movieId) {
      this.movieId = movieId;
      this.requestDetail();
      this.reuqestViewTimes();
      this.reuqestIncome();
      this.reuqestPayInfo();
    } else {
      this.cancel();
    }
  }
};
</script>

<style lang="scss" scoped>
.section-content {
  margin-bottom: 40px;
  padding: 0 20px;
  color: #333333;
}

.info-item {
  margin-top: 10px;
  font-size: 16px;
}

.base-info {
  color: #333333;

  .poster-wrap {
    width: 170px;
    height: 284px;
    margin-right: 40px;
    line-height: 243px;
    text-align: center;
    font-size: 100px;
    background-color: #f2f2f2;
    color: #999999;
  }

  .movie-name {
    font-size: 24px;
  }

  .movie-format {
    font-size: 16px;
  }

  .movie-status {
    margin-left: 40px;
  }

  .movie-type {
    margin-top: 20px;
  }

  .divider {
    height: 40px;
    margin: 0 40px;
  }

  .statistics-info {
    font-size: 22px;
    text-align: center;

    .statistics-title {
      margin-bottom: 20px;
      font-size: 14px;
      color: #666;
    }
  }
}
</style>